<template>
	<div class="bg" @click="close">
		<div class="bgbox">
			<div class="flex j-center a-center">
				<div class="flex a-center" v-for="v in pays" @click="pay(v.id,v)" :key="v.id" style="margin: 20px; padding: 10px;">
					<img :src="v.description=='微信'?require('../assets/img/wx.png'):require('../assets/img/zhifubao.svg')">
					<span>{{v.description}}支付</span>
				</div>
			</div>			
		</div>
	</div>	
</template>
<script>
export default {
	props:{
		show:{type:Boolean},
		id:{type:String}
	},
	data(){
		return {
			pays:[]
		}
	},
	mounted(){
		var that = this
		that.onPlusReady(function(){
			plus.payment.getChannels(function(channels) {
				for (var i in channels) {
					var channel = channels[i];
					if (channel.id == 'qhpay' || channel.id == 'qihoo') {continue;}
					that.pays.push(channel)
				}
			}, function(e) {
				outLine('获取支付通道失败：' + e.message);
			});
		})
	},
	methods:{
		close(){
			this.$emit('update:show',false)
		},
		pay(id,obj){
			var that = this
			var uid = id=='alipay'?2:1
			that.$ajax.toPay({
				orderId:that.id,
				payMode:uid
			}).then(res=>{
				console.log(res)
				if(res.code==0){
					plus.payment.request(obj,res.data.payParams,function(result){
						that.$emit('zf')
					},function(e){
						that.$toast.fail('支付失败')
					});
				}
			})
		}
	}
}
</script>
<style lang="scss" scoped="scoped">
	.bg{
		width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 99; background: rgba(0,0,0,0.6);
		.bgbox{
			width: 100%; font-size: 0.42rem; color: #333; background: #fff; padding: 10px 5%; position: fixed; left: 0; bottom: 0;
			h4{ display: block; text-align: center; font-size: 0.3rem; font-weight: 400;}
			img{ width: 0.72rem; margin-right: 0.15rem;}
		}
	}
</style>